<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="20">
      <el-container style="opacity: 0.9;display: block" class="message">
        <el-card class="animate__animated animate__fadeInLeft publish">
          <div class="author">
            <el-avatar v-if="token===null || token === undefined" :src="default_avatar" size="large"></el-avatar>
            <el-avatar v-else :src="avatar" size="large"></el-avatar>
            <div>
              <div class="nkname">
                <span> 欢迎 </span>
                <span class="name" v-if="token==null">匿名用户</span>
                <span class="name" v-else>{{ name }} </span>
              </div>
            </div>
          </div>
          <el-form :model="messageForm" ref="messageFormRef" label-width="68px">
            <el-form-item label="工作内容" prop="content">
              <Tinymce v-if="show" :height="400" v-model="messageForm.content"></Tinymce>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="24" style="text-align: center">
                  <el-button type="primary" @click="publish">点击发表</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-card>
      </el-container>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
    <!-- 设置底部距离的 -->
    <el-backtop :bottom="60">
      <div style="
            height: 50px;
            width: 50px;
            background-color: rgba(240,239,241,1);
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px;
            border-radius:2px;
            color: #1989fa;
          "
      >
        <svg-icon icon-class="top"/>
      </div>
    </el-backtop>
  </el-row>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  getToken
} from '@/utils/auth'
import Emoji from '@/components/Emoji'
import {addDailyWork} from "@/api/teach/dailyWork";
import Tinymce from "@/components/Tinymce/index.vue";

export default {
  components: {
    Tinymce,
    // Transition,
    // textOverflow,
    Emoji
  },
  name: 'message',
  data() {
    return {
      picList: [],
      default_avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      editing: false,
      show: true,
      messageList: [],
      // userInfo: null,
      message: {
        userId: -1,
        content: ''
      },
      messageForm: {},
      messageOtherForm: {},
      // 总条数
      total: 0,
      cursorIndexStart: null,//光标选中开始的位置
      cursorIndexEnd: null//光标选中结束的位置
    }
  },
  created() {
    // console.log(this.token)
  },
  watch: {
    show(valNew, valOld) {
      if (!valNew) {
        setTimeout(() => {
          this.messageForm.content = null
          this.show = true
        },2000)
      }
    }
  },
  updated: function() {
    this.$nextTick(function() {
      // 仅在整个视图都被渲染之后才会运行的代码
    })
  },
  computed: {
    ...mapGetters([
      'token',
      'avatar',
      'name'
    ])
  },
  methods: {
    // 发表
    publish() {
      let token = getToken()
      this.$refs.messageFormRef.validate(async valid => {
        if (!valid) return
        if (this.messageForm.content == null || this.messageForm.content === '') {
          this.$modal.msgError('内容不能为空！')
          return
        }
        if (token == null || token === '') {
          this.messageForm.createBy = '匿名用户'
          this.messageForm.type = '0'
        } else {
          this.messageForm.createBy = this.$store.getters.name
          this.messageForm.type = '0'
        }
        addDailyWork(this.messageForm).then(response => {
          // console.log(response)
          this.$modal.msgSuccess('发布成功')
          this.show = false

          // this.reset()
          // this.getMessageList()
        })
      })
    },
    blur(e) {
      this.cursorIndexStart = e.srcElement.selectionStart  // 获取input输入框失去焦点时光标选中开始的位置
      this.cursorIndexEnd = e.srcElement.selectionEnd  // 获取input输入框失去焦点时光标选中结束的位置
    },
    output(val) {
      if (this.cursorIndexStart !== null && this.messageForm.content) {
        //如果 文本域获取了焦点, 则在光标位置处插入对应字段内容
        this.messageForm.content = this.messageForm.content.substring(0, this.cursorIndexStart) + val + this.messageForm.content.substring(this.cursorIndexEnd)
      } else {
        // 如果 文本域未获取焦点, 则在字符串末尾处插入对应字段内容
        this.messageForm.content = this.messageForm.content ? this.messageForm.content : '' + val
      }
    },
    //跳转到相应位置
    to() {
      if (this.$route.query.id != null) {
        var toEl = document.getElementById(this.$route.query.id)
        if (toEl != null) {
          if (toEl != null && toEl != '') {
            // toEl 为指定跳转到该位置的DOM节点
            let bridgeCms = toEl
            let bodyTop = document.body
            let heightCms = 0
            // 计算该 DOM 节点到 bodyTop 顶部距离
            do {
              heightCms += bridgeCms.offsetTop
              bridgeCms = bridgeCms.offsetParent
            } while (bridgeCms !== bodyTop)
            // 滚动到指定位置
            window.scrollTo({
              top: heightCms,
              behavior: 'smooth'
            })
          }
        }
      }
    }

  }
}
</script>

<style scoped>
.elementCollapse {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  padding-top: 0.1rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.collapseBtn {
  width: 100%;
  height: 2vh;
  line-height: 2vh;
  text-align: center;
  font-size: 12px;
  color: #000;
  cursor: pointer;
}

.collapseHeaderBox {
  height: calc(100% - 2vh);
}

.collapseHeader {
  background-color: #fff;
}

.publish {
  margin-bottom: 20px;
}

.author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.nkname {
  margin: 10px;
  max-width: 530px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
